<template>
	<view class="password-login">
		<image class="logo" src="/static/img/common/tip.png"></image>
		<view class="list">
			<view class="item mobile">
				<input type="text" v-model="mobile" maxlength="11" placeholder="请输入手机号码">
			</view>
			<view class="item password">
				<input type="text" :password='!isView' v-model="password" maxlength="16" placeholder="请输入密码">
				<view class="view" @tap="toogleView">
					<image :src="isView?'/static/img/common/view.png':'/static/img/common/no-view.png'"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: '', // 账号
				password: '', // 密码
				isView: false, // 是否显示密码
			}
		},
		methods: {
			// 密码显示切换
			toogleView() {
				this.isView = !this.isView
			}
		}
	}
</script>

<style lang='scss' scoped>
	@import '@/static/scss/config.scss';
	@import '@/static/scss/mixin.scss';

	.password-login {
		@include box-w();

		.logo {
			margin: 110rpx auto;
			@include square(152rpx);
			display: block;
		}

		.list {
			.item {
				@include box(100%, 68rpx);
				padding: 0 32rpx;

				&+.item {
					margin-top: 42rpx;
				}

				input {
					@include square(100%);
					border-bottom: 2rpx solid $bg-h;
				}

				&.password {
					position: relative;

					input {
						padding-right: 68rpx;
					}
					.view{
						@include square(68rpx);
						@include right(32rpx);
						@include flex-row();
						&>image {
							@include box(36rpx, 25rpx);
						}
					}
				}
			}
		}
	}
</style>
